import $ from 'jquery';
const THEME_STORAGE_KEY = 'theme';
const LIGHT_THEME = 'light';
const DARK_THEME = 'dark';

function getThemeName(themeType) {
    const theme = $('body').attr(`data-${themeType}-theme`);
    return theme !== undefined ? theme : (themeType === 'dark' ? DARK_THEME : LIGHT_THEME);
}

function setTheme(theme) {
    const themeClass = theme === 'dark' ? getThemeName('dark') : getThemeName('light');
    $('body').attr('data-theme', themeClass);
    localStorage.setItem(THEME_STORAGE_KEY, theme);
}

export function initializeThemeToggle() {
    const themeToggle = $('#themeToggle');

    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
    if (savedTheme) {
        setTheme(savedTheme);
        themeToggle.prop('checked', savedTheme === 'dark');
    }

    themeToggle.on('change', function() {
        const newTheme = themeToggle.prop('checked') ? 'dark' : 'light';
        setTheme(newTheme);
    });
}